<template>
  <div>
    <div class="color">
      <div class="left" @click="back()"><van-icon name="arrow-left" /></div>
      <div class="center">等待买家付款</div>
      <van-count-down
        millisecond
        :time="count"
        @finish="finish"
        format="mm:ss:SS"
      />
      <!-- 点击倒计时开始 -->
      <!-- <div class="count">还剩{{ count }}秒</div> -->
      <!-- <input v-trigger class="button" id="nav" type="button" value="增加" @click="start"> -->
    </div>
    <van-contact-card
      type="edit"
      :name="currentContact.name"
      :tel="currentContact.tel"
    />
    <!-- <back></back> -->
    <div class="shoplist" v-if="!addBuy.length == 0">
      <div class="num">共{{ addBuy.length }}件商品</div>
      <ul class="white">
        <li v-for="item in addBuy" :key="item.item.selectedSkuComb.id">
          <!-- <button @click="handleRemove(item)">不买了</button> -->
          <div class="flex">
            <div class="img">
              <img :src="item.item.selectedSkuComb.imgUrl" alt="图片" />
            </div>
            <div class="text">
              <!-- <h2 class="van-ellipsis">商品标题</h2>
          <h3 class="grey">商品属性</h3> -->
              <h4 style="color: var(--cy-Color); font-size: 14px">
                ￥{{ item.item.selectedSkuComb.price / 100 }}
              </h4>
            </div>
            <div class="count"><van-icon name="cross" />{{ item.count }}</div>
          </div>
        </li>
      </ul>
    </div>
    <div class="shoplist" v-if="!addItem.length == 0">
      <div class="num">共{{ addItem.length }}件商品</div>
      <ul class="white">
        <li v-for="item in addItem" :key="item.item.selectedSkuComb.id">
          <!-- <button @click="handleRemove(item)">不买了</button> -->
          <div class="flex">
            <div class="img">
              <img :src="item.item.selectedSkuComb.imgUrl" alt="图片" />
            </div>
            <div class="text">
              <!-- <h2 class="van-ellipsis">商品标题</h2>
          <h3 class="grey">商品属性</h3> -->
              <h4 style="color: var(--cy-Color); font-size: 14px">
                ￥{{ item.item.selectedSkuComb.price / 100 }}
              </h4>
            </div>
            <div class="count"><van-icon name="cross" />{{ item.count }}</div>
          </div>
        </li>
      </ul>
    </div>
    <div v-else></div>
    <div class="tab">
      <ul class="left">
        <li>快递:</li>
        <li>你的余额:</li>
        <li>减去商品总价:</li>
        <!-- <li>
        </li> -->
        <li>还剩:</li>
      </ul>
      <ul class="right">
        <li>包邮</li>
        <li>
          {{ LoginUser.now_money }}
        </li>
        <li>
          {{ parseFloat((this.$store.state.UnitPrice / 100).toFixed(2)) }}
        </li>
        <!-- <li>
          =
        </li> -->
        <li>
          {{
            parseFloat(
              (
                this.LoginUser.now_money -
                this.$store.state.UnitPrice / 100
              ).toFixed(2)
            )
          }}
        </li>
      </ul>
    </div>
    <van-submit-bar :price="UnitPrice" button-text="付款" @submit="onSubmit" />
  </div>
</template>
<script>
// import { Toast } from "vant";
// import { Toast } from "vant";
import { Dialog, Toast } from "vant";
import { mapGetters } from "vuex";
import { mapActions } from "vuex";
import { mapState } from "vuex";
// import Back from "@/components/Back.vue";
export default {
  props: {
    product_id: [String, Number],
    id: [String, Number],
  },
  data() {
    return {
      temp: false,
      currentContact: {
        name: "张三",
        tel: "13000000000",
      },
      onSbmit: null,
      count: 1 * 60 * 1000,
    };
  },
  methods: {
    onSubmit() {
      if (this.LoginUser.now_money - this.$store.state.UnitPrice / 100 >= 0) {
        Dialog.alert({
          message: "付款成功",
        }).then(() => {
          // on close
          this.$store.state.count;
          this.$store.dispatch("DeleteBuy");
          this.$router.push({ path: "/user" });
        });
      } else {
        Toast("余额不足，付款失败");
      }
    },
    finish() {
      Dialog.alert({
        message: "时间结束",
      }).then(() => {
        // on close
        this.$store.dispatch("DeleteBuy");
        this.$router.push({ path: "/user" });
      });
    },
    ...mapActions(["start"]),
  },
  components: {
    // Back,
  },
  created() {
    // this.$store.state.allChecked=false;
    // console.log(this.$store.state.allChecked);
    this.unit = this.$store.state.UnitPrice / 100;
    this.price = this.LoginUser.now_money - this.unit;
    console.log("addBuy=>", this.addBuy);
    console.log("addItem=>", this.addItem);
    console.log(this.LoginUser);
  },
  watch: {},
  computed: {
    addBuy() {
      return this.$store.state.addBuy;
    },
    UnitPrice() {
      return this.$store.state.UnitPrice;
    },
    addItem() {
      return this.$store.state.addItem;
    },
    ...mapState(["state"]),
    ...mapGetters(["LoginUser"]),
  },

  mounted() {
    this.$store.state.UnitPrice = 0;
    this.$store.state.addBuy.map((ele) => {
      this.$store.state.UnitPrice += ele.item.selectedSkuComb.price * ele.count;
    });
    this.$store.state.addItem.map((ele) => {
      this.$store.state.UnitPrice += ele.item.selectedSkuComb.price * ele.count;
    });
  },
};
</script>
<style >
.van-count-down {
  color: white;
  font-size: 30px;
  line-height: 40px;
  position: absolute;
  margin: 20px 35%;
}
</style>
<style lang="less" scoped>
.van-submit-bar__text {
  text-align: left;
}
.revoke {
  bottom: 30vh;
}
.button {
  display: none;
}
.color {
  background: var(--cy-Color);
  width: 100%;
  height: 60px;
  position: relative;
  .left {
    color: white;
    font-size: 40px;
    position: absolute;
    margin: 7px 2px;
  }
  .center {
    color: white;
    font-size: 16px;
    position: absolute;
    margin: 5px 37.2%;
  }
  .count {
    color: white;
    line-height: 60px;
    /* margin: 0 auto; */
    position: absolute;
    left: 30vw;
    /* margin: 0px 30%; */
    font-size: 35px;
  }
}
.shoplist {
  .white {
    li {
      border-bottom: 3px solid rgba(0, 0, 0, 0.1);
      padding: 5px;
    }
    li:nth-child(1) {
      border-top: 3px solid rgba(0, 0, 0, 0.1);
    }
  }
  .num {
    padding: 10px;
    font-size: 16px;
    border-bottom: 1px solid rgb(0 0 0 / 13%);
  }
  .flex {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    font-size: 16px;
    .img {
      width: 75px;
      height: 75px;
      margin: 5px;
      background: var(--cy-Color);
      img {
        width: 100%;
        height: 100%;
      }
    }
    .text {
      flex: 1;
      padding: 5px;
      height: 75px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .van-ellipsis {
        font-size: 16px;
      }
      .grey {
        font-size: 12px;
        color: grey;
      }
    }
    .count {
      font-size: 20px;
      padding: 5px;
      color: #999;
    }
  }
}
.tab {
  color: #666;
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-size: 16px;
  ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    &.right {
      text-align: right;
    }
    &.left {
      text-align: left;
    }
    li {
      padding: 7px;
      height: 16px;
      border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    }
  }
}
</style>